<template>
  <div class="app-container customer-page-box">
    <div class="search">
      <div class="top">
        <p>高级搜索</p>
      </div>
      <div class="bottom">
        <el-form
          ref="queryForm"
          class="cus-search-box"
          :inline="true"
          label-width="100px"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item label="线索ID：" prop="id" width="300">
                <el-input
                  v-model="form.id"
                  placeholder="请输入线索ID"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="手机号：" prop="phone">
                <el-input
                  v-model="form.phone"
                  placeholder="请输入手机号"
                  clearable
                />
              </el-form-item>

            </el-col>
            <el-col :span="6">
              <el-form-item label="渠道来源：" prop="channel">
                <el-select
                  v-model="form.channel"
                  placeholder="请选择渠道来源"
                  clearable
                >
                  <el-option
                    v-for="dict in channelList"
                    :key="dict.id"
                    :label="dict.value"
                    :value="dict.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建时间：" prop="dateList">
                <el-date-picker
                  v-model="dateList"
                  clearable
                  type="daterange"
                  align="right"
                  unlink-panels
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="getDate"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item class="search-btn wp-50">
            <el-button
              class="cus-search-btn"
              type="primary"
              @click="search"
            >搜索</el-button>
            <el-button class="cus-reset-btn" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="cus-btn-box">
      <div class="cus-btn-con">
        <el-button
          class="primary-btn"
          :disabled="num===0? true : false"
          @click="getClue"
        >批量捞取</el-button>
      </div>
    </div>

    <div>
      <div>
        <el-table
          ref="table"
          v-loading="isLoad"
          class="cus-table-box"
          stripe
          :data="list"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="62" align="center" />
          <el-table-column
            label="线索ID"
            align="center"
            min-width="80"
            prop="id"
          />
          <el-table-column
            label="手机号"
            align="center"
            min-width="100"
            prop="phone"
          />
          <el-table-column
            label="渠道来源"
            align="center"
            min-width="100"
            prop="channel"
          >
            <template #default="{row}">
              {{ editChannel(row.channel) }}
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            min-width="140"
            sortable
            prop="beginCreateTime"
          >
            <template #default="{row}">
              {{ startDate(row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column
            label="归属人"
            align="center"
            min-width="100"
            prop="name"
          />
          <el-table-column
            label="线索状态"
            align="center"
            prop="status"
            min-width="100"
          >
            <template #default="{row}">
              {{ editStatus(row.status) }}
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            min-width="200"
            class-name="small-padding fixed-width"
          >
            <!--  slot-scope="scope" -->
            <template #default="{row}">
              <el-button
                size="mini"
                type="text"
                @click="getClue(row.id)"
              >捞取</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-container">
          <div class="txt">您已选{{ num }}条</div>
          <el-pagination
            background
            :current-page="Number(form.page)"
            :page-sizes="[10, 50, 100, 150]"
            :page-size="Number(form.pageSize)"
            layout="total, prev, pager, next, sizes"
            :total="Number(total)"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <!-- 捞取弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :modal-append-to-body="false"
      @close="colseDailog"
    >
      <p v-if="num">您已选择{{ num }}条数据</p>
      <p>确定捞取？</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="colseDailog">取 消</el-button>
        <el-button type="primary" @click="LQClue">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCluePoolListApi, goBackListApi } from '@/api/clue'
import { Message } from 'element-ui'
export default {
  data() {
    return {
      isLoad: false,
      // 捞取弹窗
      dialogVisible: false,
      ids: [],
      num: 0, // 批量捞取的个数
      form: {
        pageNum: 1,
        pageSize: 10,
        id: null, // 线索id
        phone: null, // 手机号
        // owner: null, // 线索归属
        beginCreateTime: null, // 创建时间
        endCreateTime: null, // 结束时间
        // status: null, // 线索装态
        channel: null// 渠道来源
      },
      rules: {

      },
      // 线索状态列表
      statusList: [{ id: '3', value: '回收' }, { id: '4', value: '伪线索' }],
      // 渠道来源
      channelList: [{ id: '0', value: '线上活动' }, { id: '1', value: '推广介绍' }],
      total: 20,
      list: [],
      // 时间
      dateList: []
    }
  },
  created() {
    this.getCluePoolList()
  },
  methods: {
    /**
     * 多选框选择事件
     */
    handleSelectionChange(data) {
      this.ids = data.map(e => e.id)
      console.log(this.ids)
      this.num = data.length
    },
    /**
     * 捞取
     */
    getClue(id) {
      if (this.num === 0) {
        this.ids.push(id)
      }
      this.dialogVisible = true
    },
    /**
     * 确定捞取
     */
    async LQClue() {
      const res = await goBackListApi(this.ids)
      if (res.code === 500) {
        Message.error('捞取失败！')
        return
      }
      Message.success('捞取成功！')
      this.dialogVisible = false
      this.getCluePoolList()
    },
    /**
     * 搜索
     */
    async search() {
      this.pageNum = 1
      this.getCluePoolList()
    },
    /**
     * 重置搜索
     */
    reset() {
      this.dateList = []
      this.form = {
        pageNum: 1,
        pageSize: 10,
        id: null, // 线索id
        phone: null, // 手机号
        // owner: null, // 线索归属
        beginCreateTime: null, // 创建时间
        endCreateTime: null, // 结束时间
        // status: null, // 线索装态
        channel: null// 渠道来源
      }
      this.getCluePoolList()
    },
    /**
     * 获取线索池列表
     */
    async getCluePoolList() {
      this.isLoad = true
      const res = await getCluePoolListApi(this.form)
      if (res.code === 500) {
        Message.error('获取线索池列表失败！')
        return
      }
      this.total = res.data.total
      this.list = res.data.records
      this.isLoad = false
    },
    /**
     * 处理时间
     */
    getDate(date) {
      this.form.beginCreateTime = date[0]
      this.form.endCreateTime = date[1]
    },
    /**
     * 时间渲染处理
     */
    startDate(val) {
      const res = val ? val.split('T').join('  ') : '--'
      return res
    },
    /**
     * 关闭弹窗
     */
    colseDailog() {
      this.dialogVisible = false
      this.num = 0
    },
    /**
     * 格式化线索状态
     */
    editStatus(val) {
      const res = this.statusList.find(e => e.id === val)
      return res?.value
    },
    /**
     * 格式化渠道
     */
    editChannel(val) {
      const res = this.channelList.find(e => e.id === val)
      return res.value
    },
    /**
     * 切换页
     */
    handleCurrentChange(val) {
      this.form.pageNum = val
      this.getCluePoolList()
    },
    /**
     * 切换页容量
     */
    handleSizeChange(val) {
      this.form.pageSize = val
      this.getCluePoolList()
    }
  }
}
</script>
<style scoped lang='scss'>
 ::v-deep .cus-search-box .el-input__inner{
  width: 300px!important;
}
::v-deep .el-form-item__label{
  font-weight: 400;
  color: #333;
}
.top{
  height: 40px;
  line-height: 40px;
  background: #f2f2f2;
  padding-left: 20px;
  border-radius: 5px;
  margin-top: -20px;
  font-weight: 500;
}
.bottom{
  border: 2px solid #f2f2f2;
  padding: 20px 30px 5px 30px;
}
.search-btn{
    text-align: right;
  }
  .wp-50{
    width: 100% !important;
  }
  .cus-btn-box{
    height: 83px;
    line-height: 83px;
    background: #fff;
    .label{
      width: 100px;
      text-align: left;
      font-size: 14px;
      font-weight: 400;
      color: #332929;
      .num{
        font-size: 14px;
        font-weight: 700;
        color: var(--current-color);
      }
    }
    .cus-btn-con{
      flex: 1;
      text-align: left;
      .el-button{
        // width: 132px;
        height: 40px;
        line-height: 40px;
        background: #3366ff;
        border-radius: 20px;
        font-size: 14px;
        color: #FFF;
        padding: 0 30px;
        border: 0;
        margin-left: 20px;
      }
      .primary-btn{
        background: #3366ff;
        color: #ffffff;
        &:hover{
          background: green;
        }
      }
      .default-btn{
        &:hover{
          background: #8DF;
          color: #ffffff;
        }
      }
    }
  }
  .page-container{
    display: flex;
    justify-content: space-between;
    padding:4px 0px;
    text-align: right;
    .txt{
      width: 80px;
      margin-top: 12px;
    }
  }
  ::v-deep .el-dialog{
    width: 400px!important;
    height: 260px!important;
    border-radius: 20px;
    border: 1px solid #000;
  }
 ::v-deep .el-dialog__footer{
    text-align: center;
 }
 ::v-deep .el-dialog__footer .el-button{
  padding: 10px 30px;
  border: 1px solid #000;
 }
 ::v-deep .el-dialog__footer .el-button--primary{
  border: none;
 }
 ::v-deep .el-dialog__body p{
  color: #000;
  font-size: 14px;
  padding-left: 136px;
 }
 ::v-deep .el-range-separator{
  width: 20px;
 }
</style>
